<template>
  <el-form :model="form" ref="form" size="small" label-width="90px" label-position="right">
    <el-header height="auto">
      <el-button type="primary" @click="onAdd">新增线路</el-button>
    </el-header>

    <div v-for="(item, index) in form.list" :key="item.uuid">
      <el-form-item class="inline-block" style="width:40%" :label="`起运地${index+1}`" :prop="`list.${index}.departDistrict`"
        :rules="{
          required: true, message: '起运地不能为空', trigger: 'change' }"
        >
<!--        <el-select style="width: 200px" v-model="item.departDistrict" @change="onChange" placeholder="请选择" filterable>-->
<!--          <el-option-->
<!--            v-for="item in areaList"-->
<!--            :key="item.districtId"-->
<!--            :label="item.addressName"-->
<!--            :value="item.districtId">-->
<!--          </el-option>-->
<!--        </el-select>-->

<!--        <virtual-select-->
<!--          @change="onChange"-->
<!--          style="width: 200px"-->
<!--          v-model="item.departDistrict"-->
<!--          :list="areaList"-->
<!--          label="addressName"-->
<!--          value="districtId"-->
<!--          :placeholder="'请选择'"-->
<!--          :keeps-params="10"-->
<!--          :label-display="mergeDisplay"-->
<!--          :merge-display="mergeDisplay"-->
<!--          :is-multiple="false"-->
<!--          :disabled="false"-->
<!--          :allow-create="false"-->
<!--        />-->
        <SelectAddress
          changeOnSelect
          :AreaList="areaList"
          :provinceValue="item.departProvince"
          :cityValue="item.departCity"
          :districtValue="item.departDistrict"
          @getFinalAddressDistrict="getFinalAddressDistrict(index,$event)"
        ></SelectAddress>
      </el-form-item>
      <el-form-item class="inline-block" :label="`目的地${index+1}`" :prop="`list.${index}.arriveDistrict`"
        :rules="{
          required: true, message: '目的地不能为空', trigger: 'change' }"
        >
<!--        <el-select style="width: 200px" v-model="item.arriveDistrict" @change="onChange" placeholder="请选择" filterable>-->
<!--          <el-option-->
<!--            v-for="item in areaList"-->
<!--            :key="item.districtId"-->
<!--            :label="item.addressName"-->
<!--            :value="item.districtId">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--        <virtual-select-->
<!--          @change="onChange"-->
<!--          style="width: 200px"-->
<!--          v-model="item.arriveDistrict"-->
<!--          :list="areaList"-->
<!--          label="addressName"-->
<!--          value="districtId"-->
<!--          :placeholder="'请选择'"-->
<!--          :keeps-params="10"-->
<!--          :label-display="mergeDisplay"-->
<!--          :merge-display="mergeDisplay"-->
<!--          :is-multiple="false"-->
<!--          :disabled="false"-->
<!--          :allow-create="false"-->
<!--        />-->
        <SelectAddress
          changeOnSelect
          :AreaList="areaList"
          :provinceValue="item.arriveProvince"
          :cityValue="item.arriveCity"
          :districtValue="item.arriveDistrict"
          @getFinalAddressDistrict="getFinalAddressDistrict2(index,$event)"
        ></SelectAddress>
      </el-form-item>
      <el-form-item class="inline-block" label="" label-width="0">
        <p class="del" @click="handleDelete(index)">移除</p>
<!--          <i size="mini" effect="plain" class="primary-color el-icon-circle-plus-outline font-size20 pointer ml20" @click="handleAdd(index)"></i>-->
<!--          <i size="mini" effect="plain" class="primary-color el-icon-remove-outline font-size20 pointer ml20" v-if="index !== 0"  @click="handleDelete(index)"></i>-->
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { randomString } from "@/utils/zito"
import { getAllInfo,getAllInfoTree  } from "@/api/login";
export default {
  props: ['data', 'areaList'],
  data() {
    return {
      form: {
        list: []
      },
      deptId:'',
      options: [{
        deptId: '100',
        deptName: "网点",
      }]
    };
  },
  watch: {
    data: {
      handler(val) {
          this.form.list = val.lineList||[]
          this.deptId=val.deptId
      },
      deep:true,
      immediate:true
    },
  },
  methods: {
    onClear() {
      this.form.list = []
    },

    // 新增线路
    onAdd() {
      this.form.list.push({
        departDistrict: '',
        arriveDistrict: '',
        mainDeptId:this.deptId
      })
    },

    onChange() {
      this.$emit('area', this.form.list)
    },

    handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    handleAdd(index) {
      this.form.list.splice(index+1, 0, {uuid: randomString(32)})
    },
    handleDelete(index) {
      this.form.list.splice(index, 1)
    },
    mergeDisplay(val) {
      return `${val.provinceName}${val.addressName}`
    },
    getFinalAddressDistrict(index,e){  //出发地
      switch (e.length) {
        case 1:
          //加载省
          this.$set(this.form.list[index],'departProvince',e[0])
          this.$set(this.form.list[index],'departCity','0')
          this.$set(this.form.list[index],'departDistrict','0')
          break;
        case 2:
          //加载省市
          this.$set(this.form.list[index],'departProvince',e[0])
          this.$set(this.form.list[index],'departCity',e[1])
          this.$set(this.form.list[index],'departDistrict','0')
          break;
        case 3:
          //加载省市区
          this.$set(this.form.list[index],'departProvince',e[0])
          this.$set(this.form.list[index],'departCity',e[1])
          this.$set(this.form.list[index],'departDistrict',e[2])
          break;
        default:
          break;
      }
    },
    getFinalAddressDistrict2(index,e){
      switch (e.length) {
        case 1:
          //加载省
          this.$set(this.form.list[index],'arriveProvince',e[0])
          this.$set(this.form.list[index],'arriveCity','0')
          this.$set(this.form.list[index],'arriveDistrict','0')
          break;
        case 2:
          //加载省市
          this.$set(this.form.list[index],'arriveProvince',e[0])
          this.$set(this.form.list[index],'arriveCity',e[1])
          this.$set(this.form.list[index],'arriveDistrict','0')
          break;
        case 3:
          //加载省市区
          this.$set(this.form.list[index],'arriveProvince',e[0])
          this.$set(this.form.list[index],'arriveCity',e[1])
          this.$set(this.form.list[index],'arriveDistrict',e[2])
          break;
        default:
          break;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.el-header {
  padding: 0;
  margin-bottom: 20px;
}

.del {
  cursor: pointer;
  margin-left: 20px;
  color: darkred;
}
</style>
